<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <router-view />
    <van-tabbar
      v-if="$route.meta.tabShow"
      v-model="bar_active"
      @change="tabbarChange"
      active-color="#ee0a24"
      inactive-color="#000"
    >
      <van-tabbar-item icon="home-o">主页</van-tabbar-item>
      <van-tabbar-item icon="search">懂我</van-tabbar-item>
      <van-tabbar-item icon="gem-o">探索</van-tabbar-item>
      <van-tabbar-item icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      bar_active: 0,
    };
  },
  methods: {
    tabbarChange(index) {
      switch (index) {
        case 0:
          this.$router.push({ path: "/index/" });
          break;
        case 1:
          this.$router.push({ path: "/search/" });
          break;
        case 2:
          this.$router.push({ path: "/study/" });
          break;
        case 3:
          this.openPerson();
          break;
      }
    },
    //打开个人中心页面
    openPerson() {
      let hasuserlogin = localStorage.getItem("user");
      if (hasuserlogin) {
     
        this.$router.push({ path: "/personal/" + hasuserlogin });
      } else {
        this.$router.push({ name: "login" });
      }
    },
    openSearch() {
      this.$router.push({ path: "/search/" });
    },
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #212121;
  background-color: #f5f5f5;
  font-size: 14px;
  height: 100vh;
}

</style>
